<template>
<!--  http://localhost:8080/test/default -->
    <div class="Test" @dragend="testmoveend($event)">
        <div class="leftcontent">
            <!-- <h1>left</h1> -->
            <div class="titcontent">
                <div class="firsttit">
                    <ul>
                        <li v-for="item in firsttit" class="firsttitli" @click="changetit(item.choseit)">
                            <div>{{item.name}}</div>
                        </li>
                    </ul>
                </div>
                <div class="makechosecontent">
                    <ul>
                        <li v-for="item in firsttit" class="makechoseli">
                            <div v-show="chosetit==item.choseit">
                                <img src='./settingIcon.png' alt="选择">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="secondcontent" id="listbox" @mousedown="creatdrag">
                    <ul>
                        <li v-for="item in secondcontentlist" draggable @dragstart="listdrag($event,item)" @dragover="listdragover($event,item)" @dragend="listdragend($event,item)">{{item.name}}</li>
                         <!-- draggable @dragstart="listdrag($event)" @dragover="listdragover($event)" @dragend="listdragend" -->
                    </ul>
                </div>
            </div>
            <div class="bottomoperation">
                <div class="addtest" @click="addtest">
                    创建实验
                </div>
            </div>
        </div>
        <div class="rightcontent">
            <!-- <h1>right</h1> -->

            <svg id="svgview" width="100%" height="100%" version="1.1"
            xmlns="http://www.w3.org/2000/svg"  @mousemove="svgMouseMonitor">
<!-- v-dragsvg -->

            <circle class="canmove" id="te1" cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="red"  transform="translate(0,0)" @mousedown="startmove" @mouseup="endmove"/>
<!--  v-drag -->

            <g class="canmove" transform="translate(200,200)" style="background:red;" @mousedown="startmove" @mouseup="endmove">
                <g>
                    <foreignObject width="180" height="50">
                        <body xmlns="http://www.w3.org/1999/xhtml" >
                        <div class="youcancontant">
                            <span class="el-icon-delete lefticon"></span>
                            <span class="midtext">这有一个故事</span>
                        </div>
                        <div class="pathover" id="aa" @mousedown="gopath"></div>
                        </body>
                    </foreignObject>
                </g>
            </g>
            <g class="canmove" transform="translate(200,500)" style="background:red;" @mousedown="startmove($event)" @mouseup="endmove($event)">
                <!-- <g> -->
                    <foreignObject width="180" height="50">
                        <body xmlns="http://www.w3.org/1999/xhtml" >
                        <div class="youcancontant">
                            <span class="el-icon-delete lefticon"></span>
                            <span class="midtext">这有2个故事</span>
                        </div>
                        <div class="pathover" id="aa" @mousedown="gopath"></div>
                        </body>
                    </foreignObject>
                <!-- </g> -->
            </g>
            <!-- 添加区 -->
            <g class="canmove" transform="translate(400,500)" style="background:red;" v-for="item in listitem"  @mousedown="startmove" @mouseup="endmove">
                <g>
                    <foreignObject width="180" height="50">
                        <body xmlns="http://www.w3.org/1999/xhtml" >
                        <div class="youcancontant">
                            <span class="el-icon-delete lefticon"></span>
                            <span class="midtext">{{item.name}}</span>
                        </div>
                        <div class="pathover" id="aa" @mousedown="gopath"></div>
                        </body>
                    </foreignObject>
                </g>
            </g>

            <g>
                <g>
                    <path class="connector" d="M 290 240 L 276 144 L 222 401"></path>
                </g>
            </g>

            </svg>


        </div>
    </div>
</template>

<script>

let CX,CY;
let canmove = false;
let moveid = "";
let OX,OY;
let listObj = "";

    export default {
        name: "Test",
        mounted(){

        },
        data() {
            return {
                chosetit:1,
                firsttit:[
                    {
                        id:"1",
                        name:"实验",
                        img:"",
                        choseit:1
                    },
                    {
                        id:"2",
                        name:"数据源",
                        img:"",
                        choseit:2
                    },
                    {
                        id:"3",
                        name:"组件",
                        img:"",
                        choseit:3
                    }
                ],
                listitem:[],
                secondcontent:[
                    {
                        id:'001',
                        name:'我的实验',
                    },
                    {
                        id:'001001',
                        name:'自建实验',
                    },
                    {
                        id:"001002",
                        name:'理想实验',
                    },
                    {
                        id:'001001001',
                        name:'EX01',
                    },
                    {
                        id:'001001002',
                        name:'EX02',
                    },
                    {
                        id:'001002001',
                        name:'LX01',
                    },
                    {
                        id:'001002002',
                        name:'LX02',
                    }
                ]
            }
        },
        computed:{
            secondcontentlist(){
                return this.secondcontent;
            }
        },
        methods:{
            changetit(data){
                this.chosetit = data;
            },
            addtest(){
                console.log("addtest");
            },
            creatdrag(event){
                var e = event || window.event; 
                let downx=e.pageX;
                let downy=e.pageY;
                var srcObj = e.target || evt.srcElement;
                //你当前是给#phonebox绑定的点击事件，所以触发时鼠标肯定在当前对象上，直接附加
                // $("#listbox").append('<div id="newDiv" style="width:100px;height:100px;background:green"/>');
                // $("#newDiv").css('left',downx);
                // $("#newDiv").css('top',downy);
                // $("#newDiv").draggable();   
                console.log(downx+','+downy);
            },
            testmoveend(el){
                // var evt =event||window.event;
                // var srcObj = evt.target || evt.srcElement;
                // console.log("test");
                // //  获取到了相对鼠标位置
                // debugger
                // console.log(evt.offsetX);
            },
            // 列表方法
            listdrag(event,item){
                var event = event || window.event; 
                var srcObj = event.target || evt.srcElement;

                var listx=event.offsetX;
                var listy=event.offsetY;
                console.log(listx+','+listy);
            },
            listdragover(event,item){
                console.log(event.pageX);
            },
            listdragend(event,item,el){
                debugger //看和上面的debugger  哪个先断住
                console.log(event);
                let position = this.isposition();
                debugger
                position?item.positionx =event.offsetX:"";
                position?item.positiony=event.offsetY:"";
                
                
                this.listitem.push(item);

            },
            isposition(el,item){
                var evt =event||window.event;
                var srcObj = evt.target || evt.srcElement;
                console.log("test");
                //  获取到了相对鼠标位置
                debugger
                console.log(evt.offsetX);
                return [evt.offsetX,evt.offsetY]
            },
            // 绘图区方法
            gopath(){
                event.preventDefault()
                event.stopPropagation();

                    var evt =event||window.event;
                    var srcObj = evt.target || evt.srcElement;
                    if (evt.offsetX){
                        CX= evt.offsetX;
                    }else{
                        var rect = srcObj.getBoundingClientRect();
                        var clientx = evt.clientX;
                        CX= clientx - rect.left;
                    }
                    if (evt.offsetY){
                        CY = evt.offsetY;
                    }else{
                        var rect = srcObj.getBoundingClientRect();
                        var clientY = evt.clientY;
                        CY = clientY - rect.left;
                    }
                    // var dx = evt.clientX - currentX;
                    // var dy = evt.clientY - currentY;
                    CX=parseFloat(CX);
                    CY=parseFloat(CY);
                    console.log(CX+","+CY);

                return false
            },
            svgMouseMonitor(el){
                var evt =event||window.event;
                var srcObj = evt.target || evt.srcElement;
                if (evt.offsetX){
                    CX= evt.offsetX;
                }else{
                    var rect = srcObj.getBoundingClientRect();
                    var clientx = evt.clientX;
                    CX= clientx - rect.left;
                }
                if (evt.offsetY){
                    CY = evt.offsetY;
                }else{
                    var rect = srcObj.getBoundingClientRect();
                    var clientY = evt.clientY;
                    CY = clientY - rect.left;
                }
                CX=parseFloat(CX);
                CY=parseFloat(CY);
                console.log(CX+","+CY);
                if(moveid&&canmove){
                    let base = moveid.getAttributeNS(null, "transform").slice(10,-1).split(' ')[0].split(',')
                    moveid.setAttributeNS(null, "transform", "translate(" + CX + "," + CY + ")");
                }
            },
            startmove(el){
                console.log("startmove")
                // var evt =event||window.event;
                // var srcObj = evt.target;
                var srcObj =el.currentTarget
                moveid = srcObj;
                if(el.id=="aa") return;
                canmove =true;
            },
            endmove(el){
                console.log("endmove")
                canmove =false;
                moveid = "";
            },
        },


        // 自定义事件
        directives:{
            // dragsvg(el,bindings){
                // el.onmousemove=function(e){
                    // var evt =event||window.event;
                    // var srcObj = evt.target || evt.srcElement;
                    // if (evt.offsetX){
                    //     CX= evt.offsetX;
                    // }else{
                    //     var rect = srcObj.getBoundingClientRect();
                    //     var clientx = evt.clientX;
                    //     CX= clientx - rect.left;
                    // }
                    // if (evt.offsetY){
                    //     CY = evt.offsetY;
                    // }else{
                    //     var rect = srcObj.getBoundingClientRect();
                    //     var clientY = evt.clientY;
                    //     CY = clientY - rect.left;
                    // }
                    // CX=parseFloat(CX);
                    // CY=parseFloat(CY);
                    // console.log(CX+","+CY);
                    // if(moveid&&canmove){
                    //     let base = moveid.getAttributeNS(null, "transform").slice(10,-1).split(' ')[0].split(',')
                    //     moveid.setAttributeNS(null, "transform", "translate(" + CX + "," + CY + ")");
                    // }
                // }
            // },
            // drag(el,bindings){
            //     let OX,OY;
        
            //     // // //  X移动
            //     el.onmousedown = function(e){
            //         var evt =event||window.event;
            //         var srcObj = evt.target || evt.srcElement;

            //         moveid = el;
            //         if(el.id=="aa") return;
            //         canmove =true;
            //         console.log("start");
            //     },
            //     el.onmouseup=function(e){
            //         canmove =false;
            //         moveid = "";
            //         console.log("end")
            //     }
            // },
        }
    }

</script>

<style lang="less" scoped>
h1{
  color: white;
  font-size: 50px;
}
.Test{
    width: 100%;
    height: 88%;
    font-size: 20px;
    color: #9cafbe;
    .leftcontent,.rightcontent{
        border: 1px solid white;
        float: left;
        width: 20%;
        height: 100%;
    }
    .leftcontent{
        padding: 10px;
        padding-top: 50px;
        .titcontent{
            height: 80%;
            padding-top: 10px;
            &>div{
                float: left;
            }
            .firsttit{
                width: 30%;
                // padding: 10px;
                .firsttitli{
                    width: 100%;
                    height: 100px;
                    margin-top: 10px;
                    background: red;
                    text-align: center;
                    padding-top: 60px;
                }
            }
            .makechosecontent{
                width: 10%;
                .makechoseli{
                    width: 100%;
                    height: 100px;
                    margin-top: 50px;
                    padding-left: 10px;
                }
            }
            .secondcontent{
                margin-top: 10px;
                width: 60%;
                border: 1px solid white;
                height: 500px;
            }
        }
        .bottomoperation{
            text-align: center;
            .addtest{
                background: red;
                width: 150px;
                margin: 0 auto;
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .rightcontent{
        width: 80%;
        color: wheat;
        cursor: -webkit-grab;


        .canmove{

            .youcancontant{
                width: 180px;
                height: 30px;
                background-color: hsla(0,0%,100%,.9);
                border: 1px solid #289de9;
                border-radius: 15px;
                font-size: 12px;
                -webkit-transition: background-color .2s;
                transition: background-color .2s;

                .lefticon{
                    color: blue;
                    background: red;
                    padding: 4px;
                    border-radius: 50%;
                    font-size: 20px;
                }
                .midtext{
                    margin-left: 20px;
                    font-size: 15px;
                }
            }
            .pathover{
                width: 10px;
                height: 10px;
                border: 1px solid black;
                border-radius: 50%;
                margin: 0 auto;
                margin-top: -5px;
                background: white;
                cursor: crosshair;
            }
        }

    }




    //  绘图部分

}
</style>
